<style lang="less" rel="stylesheet/less" scoped>
// 热门搜索
    .hot{
        color: #cc0000;
        font-size: 0.32rem;
    }
    .hot-list{
        font-size: 0.3rem;
        padding-left: 0.3rem;
        li{
            margin: 0.2rem 0;
            border-bottom: 1px solid #bbbbbb;
            span{
                font-style: italic;
                color: #cc0000;
            }
            .hot-index{
                font-size: 0.32rem;
                font-style: italic;
                color: #cc0000;
            }
        }
    }
    .book-list{
        margin: 0 0.1rem;
        font-size: 0.27rem;
        li{
            align-items: center;
            border: 1px solid #bbbbbb;
            margin: 0.2rem 0;
            padding: 0.2rem;
            .book{
                position: relative;
                img{
                    width: 25vw;
                    height: 20vmax;
                    display:inline-block;    
                }
                i{
                    position:absolute;
                    right: 0.1rem;
                    bottom: 0;
                    font-size: 0.4rem;
                    color: aqua;
                }
            }
            .book-info{
                width: 50vw;
                line-height: 0.6rem;
                span{
                    display: block;
                    float: right;
                }
            }
        }
    }
</style>
<template>
    <div class="searchbox">
   <!-- 搜索 -->
        <div class="box-left search-box">
            <div class="box-left search-text">
                <img src="../../assets/img/search.png" alt="搜索" class="search-img">
                <input type="text" placeholder="书名、作者、ISBN号" autofocus v-model="searchInfo" class="search">
                <span class="cancel" v-show="searchInfo !=''" @click="pathTo(0)">取消</span>
            </div>
        </div>
    <!-- 热门搜索 -->
        <p class="hot">热门搜索</p>
        <ul v-for="(item,index) in hotSerch" :key="index" class="hot-list">
            <li><span :class="[index<3?'hot-index':'']">No.{{ index | formatContent }}：</span>{{item}}</li>
        </ul>
    <!-- 搜索结果 -->
        <ul class="book-list">
            <li v-for="(item,index) in borrowAlso" :key="index" class="box-between">
                    <div class="book">
                        <img :src="item.img" :alt="item.name">
                        <i>{{ index }}.8</i>
                    </div>
                    <div class="book-info">
                        <p>书名：{{ item.name }}</p>
                        <p>作者：{{ item.user }}</p>
                        <span>库存剩余：{{ item.state }}</span>
                    </div>
            </li>
        </ul>
    <!-- 页脚 -->
        <div class="footer">{{footerMsg}}</div>    
    
    </div>
</template>

<script>
    import p1 from '../../assets/img/p1.jpg'

    export default {
        name: "",
        //数据
        data() {
            return {
                searchInfo:'',
                footerMsg:'',
                hotSerch:['钢铁是怎样炼成的','狼图腾','解忧杂货铺','预见未来','小王子'],
                borrowAlso:[{img:p1,name:'自在独行',user:'贾平凹',state:'2',info:2},],
                aa:[],
            };
        },
        // 计算属性
        computed: {
        },
        //组件
        components: {},
        //初始化数据
        mounted() {
            document.title = '搜索';
        },
        //方法
        methods: {
            pathTo(num){
                switch(num){
                    case 0:
                        this.$router.go(-1);
                        break;
                }
            }
        },
        filters: {
            formatContent(content, fmt) {    
                fmt = content + 1;
                return fmt;
            }
        }
    };
</script>
